<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章编辑页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/editor.css">
</head>
<body>
    <div class="SY_editor">
        <div class="SY_editor_wrap">
            <div class="SY_editor_list">
                <div class="build_new fs2 feb">
                    <div class="bor">
                        <a href="javascript:void(0);">
                            <i class="fa fa-pencil"></i>
                            新建文章
                        </a>
                    </div>
                </div>
                <div class="list_wrap">
                    <ul>
                        <li class="curr">
                            <div class="bor">
                                <div class="tit fs2 S_autocut">无标题</div>
                                <div class="tit S_autocut"></div>
                                <div class="status clearfix">
                                    <div class="fl">
                                        <span class="time">2018-01-16 15:57:20</span>
                                        <span class="step dn">保存中...</span>
                                    </div>
                                </div>
                                <a href="javascript:void(0);" class="del pa">
                                    <i class="S_icon fa fa-trash"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="SY_editor_main pr">
                <div class="main_wrap">
                    <div class="main_head pf">
                        <div class="main_head_inner clearfix">
                            <div class="fl logoBox usn">
                                <a href="IndexNew.html"><img src="img/icons/logo.png" alt="深夜学院"><span class="slogin">深夜研习社</span></a>
                            </div>
                            <div class="fr rightMsg">
                                <div class="dib user clearfix">
                                    <a href="javascript:void(0);" class="fl dib avatar">
                                        <img class="br50" src="https://q.qlogo.cn/g?b=qq&nk=1690355023&s=100" alt="">
                                    </a>
                                    <div class="fl nickName">Jianfengtheboy</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_box pr" id="main_box">
                        <div class="main-content">
                            <div class="main_toppic pr" style="transition: height 0.2s linear;">
                                <!--上传中-->
                                <div class="uploading tac pa dn"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
                                <div class="txtbox pa">请添加封面图（支持5M以内的JPG、GIF、PNG图片，建议尺寸：1000*400px）</div>
                                <div class="upload pa">
                                    <input type="file" name="pic1">
                                </div>
                                <div class="picbox dn">
                                    <img id="movePic" src="http://img.shenyecg.com/UploadImages/2018/1/18/2018011814374891054.jpg" alt="" style="position: absolute;top:0;left:0;">
                                </div>
                                <div class="optbox pa dn">
                                    <a href="javascript:void(0);" class="btn_c tac pr"><i class="fa fa-exchange"></i> 更换<input type="file" class="pa"></a>
                                </div>
                                <div class="optbox2 pa dn">
                                    <a href="javascript:void(0);" class="btn_c pr"><i class="fa fa-remove"></i></a>
                                </div>
                            </div>
                            <div class="tip">注：上传优质的封面图片，更容易让你的作品赢得掌声哦~</div>
                            <div class="main_editor">
                                <div class="title pr">
                                    <textarea type="text" class="S_input" placeholder="请输入标题"></textarea>
                                    <span class="tips pa"><span>0</span>/32</span>
                                </div>
                                <div class="preface pr">
                                    <input type="text" class="S_input" placeholder="导语（选填）">
                                    <span class="tips pa"><span>0</span>/44</span>
                                </div>
                                <div class="main_toolbar pr">
                                    <div class="cover pa"></div>
                                    <div class="main_toolbar_inner">
                                        <div class="pos">
                                            <ul class="clearfix">
                                                <li class="row">
                                                    <ul class="clearfix" style="border-left: 0;">
                                                        <li class=""><a href="javascript:void(0);" data-role='bold' title="加粗" class="S_icon icon_bold"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='italic' title="斜体" class="S_icon icon_italic"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='strikeThrough' title="删除线" class="S_icon icon_linethrough"><i></i></a></li>
                                                        <li class="more">
                                                            <a href="javascript:void(0);" title="应用颜色" class="ico"><i class="S_icon icon_color" style="border-bottom:3px solid #333333;"></i></a>
                                                            <a href="javascript:void(0);" title="选择颜色" class="opt"><i class="S_icon fa fa-caret-down"></i></a>
                                                            <div class="S_layer dn pa">
                                                                <div class="content pr">
                                                                    <div class="layer_color">
                                                                        <h2><span><i style="background: #333;"></i></span>去除颜色</h2>
                                                                        <div>
                                                                            <h3>标准色</h3>
                                                                            <ul class="clearfix">
                                                                                <li><a href="javascript:void(0);"><i style="background:#717071"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#c9c9c9"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#ff8a78"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#fec467"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#7cd7a3"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#5bc9ea"></i></a></li>
                                                                                <li><a href="javascript:void(0);"><i style="background:#c893eb"></i></a></li>
                                                                            </ul>
                                                                            <h3>主题颜色</h3>
                                                                            <ul class="clearfix" style="height:auto;">
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#333333"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#717071"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#b5b5b5"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#808080"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#c9c9c9"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#e3e3e3"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#d24a35"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#ff8a78"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#ffc3b9"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#d49225"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#fec467"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#fee0b1"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#42ac6f"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#7cd7a3"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#bbeacf"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#1f9dc4"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#5bc9ea"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#aae3f4"></i></a>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="javascript:void(0);"><i style="background:#9053b9"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#c893eb"></i></a>
                                                                                    <a href="javascript:void(0);"><i style="background:#e2c7f4"></i></a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="more2">
                                                            <a href="javascript:void(0);" title="选择字号" class="S_select"><span>正文</span><i class="S_icon fa fa-caret-down pa"></i></a>
                                                            <div class="layer_menu_list dn pa">
                                                                <ul style="height:auto;">
                                                                    <li style="font-size:26px"><a href="javascript:void(0);">大标题</a></li>
                                                                    <li style="font-size:22px"><a href="javascript:void(0);">小标题</a></li>
                                                                    <li style="font-size:16px"><a href="javascript:void(0);">正文</a></li>
                                                                </ul>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class=""><a href="javascript:void(0);" data-role='insertOrderedList' title="有序列表" class="S_icon icon_ol"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='insertUnorderedList' title="无序列表" class="S_icon icon_ul"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class="curr"><a href="javascript:void(0);" data-role='justifyLeft' title="居左" class="S_icon icon_tl"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='justifyCenter' title="居中" class="S_icon icon_tc"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" data-role='justifyRight' title="居右" class="S_icon icon_tr"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class=""><a href="javascript:void(0);" title="引用" class="S_icon icon_blockquote"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="分割线" class="S_icon icon_line"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix" style="overflow:hidden">
                                                        <li class=""><a href="javascript:void(0);" title="插入图片" class="S_icon icon_image"><i><input type="file"></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="插入视频" class="S_icon icon_video"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="插入链接" class="S_icon icon_link"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="插入商品" class="S_icon icon_commodity"><i></i></a></li>
                                                        <li class=""><a href="javascript:void(0);" title="插入电影" class="S_icon icon_filmreview"><i></i></a></li>
                                                    </ul>
                                                </li>
                                                <li class="row">
                                                    <ul class="clearfix">
                                                        <li class=""><a href="javascript:void(0);" title="全屏编辑" class="S_icon icon_maxwin"><i></i></a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="editor_in_v2">
                                    <div id="editor" contenteditable="true" class="S_editor_frame placeholder" style="min-height:675px;">
                                        <p>&#8203</p>
                                        <p class="imgBoxLoading tac dn"><span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span></p>
                                    </div>
                                </div>
                                <div style="height:1px;font-size:1px;line-height:1px;overflow:hidden;text-indent:-9999px;"></div>
                            </div>
                        </div>
                        <div class="main_attachment pa">
                            <div class="upload dib">
                                <a href="javascript:void(0);" class="pr">
                                    <i class="fa fa-paperclip fa-rotate-90"></i>
                                    添加附件（最大<span>xx</span>）
                                    <input type="file">
                                </a>
                            </div>
                            <div class="uploaded br5 dib pr">
                                <a class="pa" href="javascript:void(0);"><i class="fa fa-trash "></i></a>
                                <div class="fileIcon dib rar"></div>
                                <div class="fileMsg dib">
                                    <p class="fileName toe">压缩包.rar</p>
                                    <p class="detail">
                                        <span class="size">20.23MB</span>
                                        <span class="tips">上传完成</span>
                                    </p>
                                </div>
                            </div>
                            <div class="uploading br5 dib">
                                <div class="fileIcon dib zip"></div>
                                <div class="fileMsg dib">
                                    <p class="fileName toe">压缩包.rar</p>
                                    <div class="uploadProgress">
                                        <div class="pr progress br5 border1 dib">
                                            <div class="pa progressing br5"></div>
                                        </div>
                                        <p class="info dib">
                                            <span class="finised">20%</span>
                                            <span class="extraTimes">剩余时间<i class="time">00:00:54</i></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_foot pf">
                        <div class="main_foot-inner clearfix">
                            <div class="foot-content">
                                <div class="fr btns">
                                    <a class="dib saveBtn" href="javascript:void(0);">保存</a>
                                    <a class="dib nextStepBtn transition" href="javascript:void(0);">下一步</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/freeMove.js"></script>
<script>
   $(function () {
       //滚动事件
       $(".main-content").scroll(function () {
           var toolBarHeight = $(".main_toppic").height() + 207;
           var toolBarY = $(".main-content").scrollTop();
           if(toolBarY >= toolBarHeight){
               $(".main_toolbar").addClass("toolbar_fixed");
               $(".editor_in_v2").css("margin-top","120px");
           }else{
               $(".main_toolbar").removeClass("toolbar_fixed");
               $(".editor_in_v2").css("margin-top","0");
           }
       });
       $(".main-content").scroll();

   <!--动态获取main_box list_wrap的高度-->
       var winHeight = ($(window).height() - 86) * 0.95;
       var listWrapHeight = $(window).height() - 61;
       $("#main_box").css("height",winHeight);
       $(".main-content").css("height",winHeight - 70);
       $(".list_wrap").css("height",listWrapHeight);
       $(window).resize(function () {
           winHeight = ($(window).height() - 86) * 0.95;
           listWrapHeight = $(window).height() - 61;
           $("#main_box").css("height",winHeight);
           $(".main-content").css("height",winHeight - 70);
           $(".list_wrap").css("height",listWrapHeight);
       });
   <!--全屏编辑&退出全屏-->
       $("a.icon_maxwin").click(function () {
           if($(this).attr("title") === "全屏编辑") {
               $(".SY_editor").addClass("SY_editor_max");
               $(this).attr("title","退出全屏");
           }else{
               $(".SY_editor").removeClass("SY_editor_max");
               $(this).attr("title","全屏编辑");
           }
       });
   <!--顶部工具栏悬浮窗显示与隐藏-->
       $("li.more .opt").click(function (e) {
           $(".S_layer").toggleClass("dn");
           e.stopPropagation();
       });
       $(".S_layer").click(function(e){
           e.stopPropagation();
       });
       $("li.more2 .S_select").click(function (e) {
           $(".layer_menu_list").toggleClass("dn");
           e.stopPropagation();
       });
       $(".layer_menu_list").click(function(e){
           e.stopPropagation();
       });
       $(document.body).click(function(){
           $(".S_layer").addClass("dn");
           $(".layer_menu_list").addClass("dn");
       });

   <!--添加，删除封面图-->
       $(".main_toppic .upload").click(function () {
        $(this).addClass("dn");

        $(".main_toppic").addClass(" main_toppic_v2 main_toppic_cursor");
        $(".picbox").removeClass("dn");
        $(".optbox").removeClass("dn");
        $(".optbox2").removeClass("dn");

    });
       $(".optbox2 .btn_c").click(function () {
        $(".main_toppic .upload").removeClass("dn");
        $(".main_toppic").removeClass(" main_toppic_v2 main_toppic_cursor");
        $(".picbox").addClass("dn");
        $(".optbox").addClass("dn");
        $(".optbox2").addClass("dn");
    });

   <!--拖动图片-->
       window.onload = function() {
           var movePic = document.getElementById("movePic");
           startDrag(movePic);
       };

   /*新建文章*/
        $(".build_new a").click(function () {
            if($(".list_wrap li").hasClass("curr")) {
                $(".list_wrap li").removeClass("curr");
            }
        var newLi = $("<li class='curr'>" +
            "               <div class='bor'>" +
            "                  <div class='tit fs2 S_autocut'>无标题</div>" +
            "                  <div class='tit S_autocut'></div>" +
            "                  <div class='status clearfix'>" +
            "                      <div class='fl'>" +
            "                          <span class='time'>2018-01-16 15:57:20</span>" +
            "                          <span class='step dn'>保存中...</span>" +
            "                      </div>" +
            "                  </div>" +
            "                  <a href='javascript:void(0);' class='del pa'>" +
            "                      <i class='S_icon fa fa-trash'></i>" +
            "                  </a>" +
            "               </div>" +
            "           </li>");
        $(".list_wrap ul").prepend(newLi);

    });
    /*删除文章*/
       /* $(".list_wrap a.del").click(function () {
            $(this).parents("li").remove();
        })*/


   /*编辑器*/
        $(".row a.S_icon").click(function (e) {
            switch($(this).data('role')) {
                case 'h1':
                case 'h2':
                    document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                    break;
                default:
                    document.execCommand($(this).data('role'), false, null);
                    break;
            }
        });
        /*编辑正文区域是否获取光标*/
       $("#editor").focus(function () {
            $(this).removeClass("placeholder");
        });
       $("#editor").blur(function () {
            $(this).addClass("placeholder");
        });

        /*是否显示active状态*/
       $(".row:eq(0) a.S_icon").click(function () {
           if($(this).parent("li").hasClass("curr") === true) {
               $(this).parent("li").removeClass("curr");
           }else{
               $(this).parent("li").addClass("curr");
           }

       });
      $(".row:eq(1) a.S_icon").click(function () {
           if($(this).parent("li").hasClass("curr") === false) {
               $(this).parent("li").addClass("curr");
               $(this).parent("li").siblings("li").removeClass("curr")
           }else{
               $(this).parent("li").siblings("li").removeClass("curr");
           }
       });
       $(".row:eq(2) a.S_icon").click(function () {
           if($(this).parent("li").hasClass("curr") === false) {
               $(this).parent("li").addClass("curr");
               $(this).parent("li").siblings("li").removeClass("curr")
           }else{
               $(this).parent("li").siblings("li").removeClass("curr");
           }
       });

        /*创建新的引用*/
       $(".row .icon_blockquote").click(function () {
           if($(this).parent("li").hasClass("curr") === false){
               $(this).parent("li").addClass("curr");
           }
           if($("#editor").find("blockquote").length == 0) {
               var newBlockQuote = $("<blockquote>&#8203;</blockquote>");
               $("#editor").append(newBlockQuote);
           }else{
               return;
           }
       });

        /*创建新下划线*/
       $(".row .icon_line").click(function () {
           var newLines = $("<p>&#8203;</p><hr/><p>&#8203;</p>");
           $("#editor").append(newLines);
       });
   })
</script>
</html>